<html>
	<head>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script src="/jquery-tmpl-master/jquery.tmpl.min.js"></script>
		<script src="/image_to_photo.js"></script>
		<style type="text/css">
			body, table tr td{
				font-size: 13px;
			}
		
			div.success{
				background-color: rgb(43, 224, 43);
			}
			div.failure{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="testResults"> </div>
		
		<script id="resultTemplate" type="text/x-jquery-tmpl">
				<div class="${success}">
					${testName}:<br/><br/>
					<table>
						<tr>
							<td>input: </td>
							<td>[imageLeft, imageWidth, imageTop, imageHeight, containerLeft, containerWidth, containerTop, containerHeight, realImageWidth, realImageHeight]</td>
						</tr>
						<tr>
							<td></td>
							<td>${input}</td>
						</tr>
					</table>
					<br/>
					${description}<br/><br/>
					output: [sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight]<br/>
					expected ${expected}, but was ${actual}<br/>
					<hr/>
				</div>
		</script>
		<script type="text/javascript">	
			function testCalculateDrawData(input, expected, testName, description){
				var result = calculateDrawData(input);
				
				var expectedValues = "";
				$.each(expected, function(index, val) {
					expectedValues = expectedValues + " ; " + val;
				});
				var actualValues = "";
				$.each(result, function(index, val) {
					actualValues = actualValues + " ; " + val;
				});
			
				if(arraysEqual(expected, result)){
					data = [
						{
							testName : testName,
							expected : expectedValues,
							actual : actualValues,
							description : description,
							input : input,
							success : "success"
						}
					];
				} else {
					data = [
						{
							testName : testName,
							expected : expectedValues,
							actual : actualValues,
							description : description,
							input : input,
							success : "failure"
						}
					];
				}
				$( "#resultTemplate" ).tmpl( data ).appendTo( "#testResults" );	
			}
			
			function arraysEqual(a, b) {
			  if (a === b) return true;
			  if (a == null || b == null) return false;
			  if (a.length != b.length) return false;

			  // If you don't care about the order of the elements inside
			  // the array, you should sort both arrays here.

			  for (var i = 0; i < a.length; ++i) {
				if (a[i] !== b[i]) return false;
			  }
			  return true;
			}
		</script>
		
		<script type="text/javascript">
			var testName = "Test 1";
			var description = "The orginal image has the same dimensions as the canvas and the left and top offset of image and canvas are collapsing. " +
			"The expected result is that we get the dimensions of the image/canvas (as it's the same) with x and y start equal to '0'. " +
			"Source width and height will be equal to dest width and height and equal to original width and height, as no transformation (resize/move occurred)";
			var input = [10,200,20,100,10,200,20,100, 200,100];
			var expectedOutput = [10,20,200,100,0,0,200,100];
			testCalculateDrawData(input, expectedOutput, testName, description);
			//
			var testName = "Test 2";
			var description = "The original image is not resized, but is bigger than the canvas (the canvas is fully surrounded by the image. " +
			"The expected result is that the image is not resized and that the part laying inside the boundaries of the canvas is returned";
			var input = [0,1000,0,900,100,800,200,600,1000,900];
			var expectedOutput = [100,200,800,600,0,0,800,600];
			testCalculateDrawData(input, expectedOutput, testName, description);
			//
			var testName = "Test 3";
			var description = "The original image is not resized, and is bigger than the canvas. The image starts at 100px left of the left border of" +
			"the canvas. The top, bottom and right border of the image are outside the canvas.";
			var input = [200,1000,0,900,100,800,200,600,1000,900];
			var expectedOutput = [0,200,700,600,100,0,700,600];
			testCalculateDrawData(input, expectedOutput, testName, description);
			//
			var testName = "Test 4";
			var description = "The original image is not resized, and is bigger than the canvas. The image starts at 100px left of the right border of" +
			"the canvas. The top, bottom and right border of the image are outside the canvas.";
			var input = [1000,1000,0,900,100,800,200,600,1000,900];
			var expectedOutput = [0,0,0,0,0,0,0,0];
			testCalculateDrawData(input, expectedOutput, testName, description);
			//
			//return [sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight];
		</script>
	</body>
</html>